<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" @filterChange="changeHandler" @onCollapse="collapseHandle" />
    <FilterTable
      ref="table"
      columnsRef="maintenanceBoutique"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      selectionType="single"
      :onRowSelectChange="rowSelectHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addRecordHandle">新建</el-button>
      </template>
    </FilterTable>
    <Drawer :visible.sync="actions.visible" :title="actions.title" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '70px' }">
      <ActionPanel :type="actions.type" :formData="editData" @close="closeActionPanel" />
    </Drawer>
  </div>
</template>

<script>
// 数据字典/按钮权限
import { dictionary } from '@/utils/dictMixin';
import { authority } from '@/utils/authMixin';
import { confirmAction, notifyAction } from '@/utils';

import { getList } from '@/api/part/qualityManagement/maintenanceBoutique';
import ActionPanel from './actionPanel';

export default {
  name: 'CardType',
  components: {
    ActionPanel
  },
  mixins: [dictionary, authority],
  data() {
    this.BaseTable = null;
    this.selectedRow = null;
    this.editData = {};
    return {
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchApi: getList,
      fetchParams: {},
      actions: { visible: false, type: '', title: '' }, // 弹出面板的相关信息,
      isChoice: true // 按钮是否可以选择
    };
  },
  methods: {
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '项目代码',
          fieldName: 'proCode'
        },
        {
          type: 'INPUT',
          label: '项目名称',
          fieldName: 'proName'
        },
        {
          type: 'SELECT',
          label: '项目状态',
          fieldName: 'isDeleted',
          itemList: [
            { text: '全部', value: '' },
            { text: '启用', value: '0' },
            { text: '停用', value: '1' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 70,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editRecordHandle(props.row)}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '装饰项目代码',
          dataIndex: 'proCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '装饰项目名称',
          dataIndex: 'proName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '工时费',
          dataIndex: 'manhaurFee',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '项目状态',
          dataIndex: 'isDeleted',
          sorter: true,
          filter: true,
          filterType: 'radio',
          filterItems: [
            { text: '启用', value: '0' },
            { text: '停用', value: '1' }
          ],
          editable: true,
          defaultEditable: true,
          disabled: true,
          editType: 'checkbox',
          editItems: [
            { text: '', trueValue: 1 },
            { text: '', falseValue: 0 }
          ]
        },
        {
          title: '停用日期',
          dataIndex: 'stopDate',
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    },
    addRecordHandle() {
      this.actions = { visible: true, type: 'add', title: '新增精品项目' };
    },
    editRecordHandle(row) {
      if (!row) return;
      this.editData = row;
      this.actions = { visible: true, type: 'edit', title: '编辑精品项目' };
    },
    changeHandler(val) {
      this.fetchParams = { ...val };
    },
    rowSelectHandle(rows) {
      if (!rows.length) return;
      console.log(rows[0]);
      this.selectedRow = rows[0];
    },
    // 移除数据记录
    async removeRecordHandle() {
      try {
        await confirmAction('此操作将删除该记录, 是否继续?');
        const res = await doRemove({ id: this.selectedRow.id });
        if (res.resultCode === 200) {
          notifyAction('删除数据成功！');
          // 执行刷新
          this.refreshHandle();
        }
      } catch (e) {}
    },
    // 主页面刷新
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    },
    // 操作面板关闭
    closeActionPanel(val, type) {
      this.actions.visible = val;
      // 重置 editData
      this.editData = {};
      // 执行刷新
      type === 'refresh' && this.refreshHandle();
    },
    // 适配 BaseTable 组件
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    }
  }
  // ,
  // mounted() {
  //   this.BaseTable = this.$refs.table.$refs.pageTable;
  // }
};
</script>

<style lang="less" scoped></style>
